<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车2</title>
    <!--http://m.mi.com/1/#/cart/index-->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--第二步：引入css-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" >
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <!--第三步：引入js-->
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
<div id="wrapper" style="background: #F5F5F5">
    <header>

        <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E.html"><img class="back" src="images/icon_back_n.png"></a>
        <div class="title"> <span style="text-align: center;line-height: .84rem;" class="title">购物车</span></div>
        <span class="icon_search"><img src="images/search.png"></span>
    </header>
    <div class="gou_b1">
        <div class="gou_b1_img"><img src="images/list202.jpg"> </div>
        <div class="gou_b1_wenzi">
        <span style="width: 100%;height: .32rem;display: block;font-size: .28rem;line-height: .32rem;color: #666">小米Note HiFi 全网通版 白色 16GB</span>
            <div class="price" style="width: 100%;height: .24rem;">
                <p style="font-size: .24rem;margin-right: .1rem;color: #999">
                    <span>售价：</span>
                    <span>1699元</span>
                    <span>合计：</span>
                    <span>1699元</span>
                </p>
            </div>
            <div class="num" style="padding-top: .2rem;float: left;">

                   <span class="input-number-decrement">–</span>
                   <input class="input-number" type="text" value="1" min="0" max="10">
                   <span class="input-number-increment">+</span>



                <div style="float: right;"><span class="glyphicon glyphicon-trash" style="font-size: .4rem"></span></div>
            </div>



        </div>
    </div>
    <div class="baoxian" style="background: #ffffff">
        <div class="b2_1" style="background: #F5F5F5" >
            <div style="width: 5rem;height: .8rem;float: left;background:  #F5F5F5">
                <img style="width: .5rem;height: .5rem;line-height: .8rem" src="images/insurance.png" alt=""/>
                <span style="font-size: .27rem;line-height: .8rem;background:  #F5F5F5">意外保服务 小米Note 199元/年</span>
            </div>
           

            <div class="fuwu" style="width: 1.2rem;height: .8rem;float: right;background: #F5F5F5">
                <span style="font-size: .27rem;line-height: .8rem;color: orangered">购买服务</span>
            </div>

        </div>
        <div style="width: 100%;height: .2rem;background: #ffffff"></div>
        <div class="b3_1" style="width: 100%;height:.67rem ;background: #ffffff;border-top: solid 1px #f1f1f1">
            <span style="font-size: .25rem;color: #ccc;line-height: .67rem;padding-left: .3rem">温馨提示：产品是否购买成功，以最终下单为准，请尽快结算</span>
        </div>
        <div class="biggroup" style="width: 100%;height: 5rem;background:#ffffff">

                    <div class="checkbox" style="width: 100%;height: .81rem;border-bottom: solid 1px #F5F5F5">
                        <label style="height: .81rem;line-height: .81rem;font-size: .25rem">
                            <input style="width: .3rem;height: .3rem;line-height: .81rem;margin-top: .3rem;margin-left: .1rem" type="checkbox" id="checkboxSuccess" value="option5">
                           <span style="padding-left: .5rem;padding-top: .3rem"> +1元得小米礼品袋</span>

                        </label>
                    </div>


                    <div class="checkbox" style="width: 100%;height: .81rem;border-bottom: solid 1px #F5F5F5">
                        <label style="height: .81rem;line-height: .81rem;font-size: .25rem">
                            <input style="width: .3rem;height: .3rem;line-height: .81rem;margin-top: .3rem;margin-left: .1rem" type="checkbox" id="checkboxSuccess" value="option5">
                            <span style="padding-left: .5rem;padding-top: .3rem"> +1元得小米礼品袋</span>

                        </label>
                    </div>


                    <div class="checkbox" style="width: 100%;height: .81rem;border-bottom: solid 1px #F5F5F5">
                        <label style="height: .81rem;line-height: .81rem;font-size: .25rem">
                            <input style="width: .3rem;height: .3rem;line-height: .81rem;margin-top: .3rem;margin-left: .1rem" type="checkbox" id="checkboxSuccess" value="option5">
                            <span style="padding-left: .5rem;padding-top: .3rem"> +1元得小米礼品袋</span>

                        </label>
                    </div>
            <div class="checkbox" style="width: 100%;height: .81rem;border-bottom: solid 1px #F5F5F5">
                <label style="height: .81rem;line-height: .81rem;font-size: .25rem">
                    <input style="width: .3rem;height: .3rem;line-height: .81rem;margin-top: .3rem;margin-left: .1rem" type="checkbox" id="checkboxSuccess" value="option5">
                    <span style="padding-left: .5rem;padding-top: .3rem"> +1元得小米礼品袋</span>

                </label>
            </div>
            <div class="checkbox" style="width: 100%;height: .81rem;border-bottom: solid 1px #F5F5F5">
                <label style="height: .81rem;line-height: .81rem;font-size: .25rem">
                    <input style="width: .3rem;height: .3rem;line-height: .81rem;margin-top: .3rem;margin-left: .1rem" type="checkbox" id="checkboxSuccess" value="option5">
                    <span style="padding-left: .5rem;padding-top: .3rem"> +1元得小米礼品袋</span>

                </label>
            </div>




        </div>
<div class="kaishou1">
        <!--<div class="kaishou" style="position: fixed;box-sizing: border-box">-->
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E.html" style="background: red;width: 2rem;height: 2rem">
                <section style="background: #ffffff;height: 1.03rem">
                    <span style="font-size: .3rem;padding-top: .1rem;color: #ccc">共2件 金额：</span><br/>
                    <span style="font-size: .3rem;padding-top: .1rem;color: orangered"><strong>3398</strong></span> <span style="font-size: .3rem;color: #ccc">元</span>


                </section>


            </a>
            <!--分类-->
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E8%B4%AD%E7%89%A9%E8%BD%A6.html" style="background: red;width: 2rem;height: 2rem">
                <section style="background: #F5F5F5;height: 1.03rem">
                    <span style="font-size: .33rem;padding-top: .1rem;color: #333;line-height: 1.03rem" >继续购物</span>

                </section>

            </a>
            <!--购物车-->
            <a href="http://localhost:63342/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/%E5%8E%BB%E7%BB%93%E7%AE%97.html" style="background: red;width: 2rem;height: 2rem">
                <section style="background: orangered;height: 1.03rem">
                    <span style="font-size: .33rem;padding-top: .1rem;color: #ffffff;line-height: 1.03rem;margin: 0 auto">去结算</span>

                </section>

            </a>


</div>


</body>
</html>

<script>
    $(function()
    {
        function fullwidth()
        {
            if($('body').width() >= 720)
            {
                $('html').css('font-size',100 + 'px');
                return;
            }
            var scale = $('body').width() / 720;
            $('html').css('font-size',scale * 100 + 'px');
        }
        fullwidth();
        $(window).resize(function()
        {
            fullwidth();
        })
    });
</script>


<script src="http://www.zaole.net/sliding.js"></script>


<script>
    (function() {

        window.inputNumber = function(el) {

            var min = el.attr('min') || false;
            var max = el.attr('max') || false;

            var els = {};

            els.dec = el.prev();
            els.inc = el.next();

            el.each(function() {
                init($(this));
            });

            function init(el) {

                els.dec.on('click', decrement);
                els.inc.on('click', increment);

                function decrement() {
                    var value = el[0].value;
                    value--;
                    if(!min || value >= min) {
                        el[0].value = value;
                    }
                }

                function increment() {
                    var value = el[0].value;
                    value++;
                    if(!max || value <= max) {
                        el[0].value = value++;
                    }
                }
            }
        }
    })();

    inputNumber($('.input-number'));
    //@ sourceURL=pen.js
</script>